<template>
	<view class="thingsPage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="headContentBack1"></view>
				<view class="backBtn" @click="backNext">
					⋘
				</view>
				<view class="headContentBack2"></view>
				<p>星座运势</p>
			</view>
		</view>
		<view class="chooseBlock">
			<view v-if="!constellation">
				<view class="chooseBlockTitle">——请选择您的星座——</view>
				<view class="constellations">
					<view class="oneOfConstellations" v-for="item in constellationImgArr" :key="item.astroid" 
						@click="chooseConstellation(item.astroid, item.astroname)">
						<view class="constellationImgs">
							<view class="constellationStar"></view>
							<image :src="item.pic" class="constellationImg"></image>
						</view>
						<view class="constellationName">{{item.astroname}}</view>
						<view class="constellationDate">{{item.date}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="astroName">
					<view class="astroChange" @click="changeConstellation">⇌</view>
					<image :src="constellationImgArr[astroid - 1].pic" class="astroImg"></image>
					<view class="astroNameStr">
						<view class="astroNameLeftTip" style="margin: 0 10rpx;">—</view>
						<view class="astroNameLeftTip" style="font-size: 130rpx;font-weight: bold;">{{constellationNameArr[0]}}</view>
						<view>{{constellationNameArr[1]}}</view>
						<view class="astroNameRightTip" style="font-size: 130rpx;font-weight: bold;">{{constellationNameArr[2]}}</view>
						<view class="astroNameRightTip" style="margin: 0 10rpx;">—</view>
					</view>
					<view class="astroContext">
						<view class="astroContextLeft">
							<view class="todayContext">
								<view class="todayTitle">今日运势</view>
								<view class="todayDate">{{todayData.date}}</view>
								<view class="todayDataCanvas">
									<canvas style="margin-top: 50rpx;" canvas-id="todayDataCanvasId" id="todayDataCanvasId" type="2d" @touchend="tap"/>
								</view>
								<view style="width: 350rpx;height: 1rpx;margin: auto;border-bottom:1rpx solid rgba(120, 181, 255, 0.1);"></view>
								<view class="todayDataFoot">
									<view>
										<view class="todayFootData">{{todayData.number}}</view>
										<view class="todayFootTitle">幸运数字</view>
									</view>
									<view>
										<view class="todayFootData">{{todayData.color}}</view>
										<view class="todayFootTitle">幸运颜色</view>
									</view>
									<view>
										<view class="todayFootData">{{todayData.star}}</view>
										<view class="todayFootTitle">速配星座</view>
									</view>
								</view>
							</view>
							<view class="todayTalk">
								<view class="todayTalkHead">
									<view class="todayTalkHeadLeft">
										{{constellationNameArr[0]}}{{constellationNameArr[1]}}资料墙
									</view>
									<view class="todayTalkHeadRight" @click="openPopup(1)">≡</view>
								</view>
								<!-- <view class="todayTalkContext">{{todayData.presummary}}</view> -->
								<view class="allTalkContext">
									<view class="uni-margin-wrap">
										<swiper class="swiper" circular :autoplay="autoplay" :interval="interval"
											:duration="duration">
											<swiper-item>
												<view class="swiper-item swiper1">
													<view class="swiper1-left">
														<view class="constellation-img">
															<view class="constellation-star"></view>
															<image :src="constellationImgArr[astroid - 1].pic" class="astro-img"></image>
														</view>
													</view>
													<view class="swiper1-right">
														<view class="swiper1-right-str1">
															{{constellationImgArr[astroid - 1].fhxz}}
														</view>
														<view class="swiper1-right-str2">
															<view class="swiperStrTip">
																{{constellationImgArr[astroid - 1].astroname}}
															</view>
															<view class="swiperStrTip">{{constellationImgArr[astroid - 1].date}}</view>
														</view>
														<view class="swiper1-right-str3">
															符号能量：{{constellationImgArr[astroid - 1].fhnl}}
														</view>
													</view>
												</view>
											</swiper-item>
											<swiper-item>
												<view class="swiper-item swiper2">
													<view class="swiper2-left">
														<view v-for="(item,inde) in constellationImgArr[astroid - 1].xgtz" :key="index">{{item}}</view>
													</view>
													<view class="swiper2-right">
														<view class="wiper2-title">{{constellationImgArr[astroid - 1].xgmy}}</view>
														<view class="wiper2-titleFoot"></view>
														<view class="wiper2-content">
															{{constellationImgArr[astroid - 1].xgms}}
														</view>
													</view>
												</view>
											</swiper-item>
											<swiper-item>
												<view class="swiper-item swiper3">
													<view class="swiper3-center">{{constellationImgArr[astroid - 1].xztz}}</view>
													<view class="swiper3-topLeft">
														<view>{{constellationImgArr[astroid - 1].shs}}</view>
													</view>
													<view class="swiper3-topRight">
														<view>{{constellationImgArr[astroid - 1].shts}}</view>
													</view>
													<view class="swiper3-botLeft">
														<view>{{constellationImgArr[astroid - 1].xzh}}</view>
													</view>
													<view class="swiper3-botRight">
														<view>{{constellationImgArr[astroid - 1].shx}}</view>
													</view>
												</view>
											</swiper-item>
										</swiper>
									</view>
								</view>
							</view>
						</view>
						<view class="astroContextRight">
							<view class="tomorrowContext">
								<view class="tomorrowHead">
									<view class="tomorrowHeadLeft">
										<view class="tomorrowHeadStr">明日预示</view>
										<!-- <view class="tomorrowHeadTip"></view> -->
										<!-- <view class="tomorrowHeadStar starIs" v-for="item in 3" :key="item">
											<image src="../../static/constellations/starIs.png"></image>
										</view>
										<view class="tomorrowHeadStar starNo" v-for="item in 2" :key="item">
											<image src="../../static/constellations/starNo.png"></image>
										</view> -->
									</view>
									<view class="tomorrowHeadRight" @click="openPopup(2)">…</view>
								</view>
								<view class="tomorrowFoot">
									<view v-for="(item,index) in tomorrowDataArr" :key="index">
										<view class="strBlock1">{{item.str}}</view>
										<view class="starsBlock">
											<view v-for="itemm in (5 - item.stars)" :key="itemm">
												<image src="../../static/constellations/starNo.png"></image>
											</view>
											<view v-for="itemm in item.stars" :key="itemm">
												<image src="../../static/constellations/starIs.png"></image>
											</view>
										</view>
										<!-- <view class="progressBlock">
											<view class="progressBack"></view>
											<view :style="{'width': (190 * item.progress) +'rpx'}" class="progressColor"></view>
										</view> -->
										<view class="strBlock">{{item.name}}</view>
									</view>
								</view>
							</view>
							<view class="weekAll">
								<view class="weekHead">
									<view class="weekHeadLeft">
										<view class="weekHeadStr">本周概况</view>
									</view>
									<view class="weekHeadRight" @click="openPopup(2)">…</view>
								</view>
								<view class="weekFoot">
									<view>
										<canvas canvas-id="weekWorkId" id="weekWorkId" type="2d"/>
									</view>
									<view>
										<canvas canvas-id="weekHealthId" id="weekHealthId" type="2d"/>
									</view>
									<view>
										<canvas canvas-id="weekMoneyId" id="weekMoneyId" type="2d"/>
									</view>
									<view>
										<canvas canvas-id="weekLoveId" id="weekLoveId" type="2d"/>
									</view>
								</view>
							</view>
							<view class="monthTalk">
								<!-- <view class="monthHead">
									<view class="monthHeadLeft">
										<view class="monthHeadStr">综合运势</view>
									</view>
									<view class="monthHeadRight">…</view>
								</view>
								<view class="monthFoot"></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="detailPopup" :is-mask-click="true" style="position: relative;z-index: 999999999;">
			<view class="popup-content" style="position: relative;z-index: 999999999;">
				<view class="detailPopup">
					<view class="popupHead">
						<view @click="closePopup">×</view>
					</view>
					<view class="popupContent" v-if="popupKey == 1">
						<view class="contentHeader">
							<view class="contentHeader-img">
								<image :src="constellationImgArr[astroid - 1].url"></image>
							</view>
							<view class="contentHeader-cont">
								<view class="cont-str1">{{constellationImgArr[astroid - 1].xztz}}星座</view>
								<view class="cont-str2">
									<view>{{constellationImgArr[astroid - 1].xgtz[0]}}</view>
									<view>{{constellationImgArr[astroid - 1].xgtz[1]}}</view>
									<view>{{constellationImgArr[astroid - 1].xgtz[2]}}</view>
								</view>
								<view class="cont-str3">{{constellationImgArr[astroid - 1].xgmy}}</view>
							</view>
						</view>
						<view class="contentFoot-cont">
							<view class="contentFoot-cont-title">守护星</view>
							<view class="contentFoot-cont-str">{{constellationImgArr[astroid - 1].shx}}</view>
						</view>
						<view class="contentFoot-cont">
							<view class="contentFoot-cont-title">守护神</view>
							<view class="contentFoot-cont-str">{{constellationImgArr[astroid - 1].shs}}</view>
						</view>
						<view class="contentFoot-cont">
							<view class="contentFoot-cont-title">守护天使</view>
							<view class="contentFoot-cont-str">{{constellationImgArr[astroid - 1].shts}}</view>
						</view>
						<view class="contentFoot-cont">
							<view class="contentFoot-cont-title">{{constellationNameArr[0]}}{{constellationNameArr[1]}}星座花</view>
							<view class="contentFoot-cont-str">{{constellationImgArr[astroid - 1].xzh}}</view>
							<view class="contentFoot-cont-str">花语：{{constellationImgArr[astroid - 1].xzhy}}</view>
						</view>
						<view class="contentFoot-cont">
							<view class="contentFoot-cont-title">{{constellationNameArr[0]}}{{constellationNameArr[1]}}符号</view>
							<view class="contentFoot-cont-str">符号象征：{{constellationImgArr[astroid - 1].fhxz}}</view>
							<view class="contentFoot-cont-str">符号能量：{{constellationImgArr[astroid - 1].fhnl}}</view>
							<view class="contentFoot-cont-str">符号描述：{{constellationImgArr[astroid - 1].fhms}}</view>
						</view>
						<view class="contentFoot-cont">
							<view class="contentFoot-cont-title">{{constellationNameArr[0]}}{{constellationNameArr[1]}}性格</view>
							<view class="contentFoot-cont-str">{{constellationImgArr[astroid - 1].xgms}}</view>
						</view>
					</view>
					<view class="popupContent1" v-else>
						<view class="popupContent-left">
							<view class="todayClass" v-if="dateChoose == 1">
								<view class="allTitle">今日指数</view>
								<view>综合运势：{{Number(todayData.summary)*20}}%</view>
								<view>工作学业：{{Number(todayData.career)*20}}%</view>
								<view>健康指数：{{Number(todayData.health)*20}}%</view>
								<view>财富运势：{{Number(todayData.money)*20}}%</view>
								<view>恋爱指数：{{Number(todayData.love)*20}}%</view>
								<view>幸运数字：{{todayData.number}}</view>
								<view>幸运颜色：{{todayData.color}}</view>
								<view>搭配星座：{{todayData.star}}</view>
								<view class="allTitle">今日{{constellationNameArr[0]}}{{constellationNameArr[1]}}</view>
								<view class="todayClassStr">{{todayData.presummary}}</view>
							</view>
							<view class="todayClass" v-if="dateChoose == 2">
								<view style="width: 600rpx;font-size: 30rpx;">明日指数</view>
								<view>综合运势：{{Number(tomorrowData.summary)*20}}%</view>
								<view>工作学业：{{Number(tomorrowData.career)*20}}%</view>
								<view>健康指数：{{Number(tomorrowData.health)*20}}%</view>
								<view>财富运势：{{Number(tomorrowData.money)*20}}%</view>
								<view>恋爱指数：{{Number(tomorrowData.love)*20}}%</view>
								<view>幸运数字：{{tomorrowData.number}}</view>
								<view>幸运颜色：{{tomorrowData.color}}</view>
								<view>搭配星座：{{tomorrowData.star}}</view>
								<view class="allTitle">明日{{constellationNameArr[0]}}{{constellationNameArr[1]}}</view>
								<view class="todayClassStr">{{tomorrowData.presummary}}</view>
							</view>
							<view class="todayClass" v-if="dateChoose == 3">
								<view style="width: 600rpx;font-size: 30rpx;">本周指数</view>
								<view>工作学业：{{Number(weekData.careerNum)*100}}%</view>
								<view>健康指数：{{Number(weekData.healthNum)*100}}%</view>
								<view>财富运势：{{Number(weekData.moneyNum)*100}}%</view>
								<view>恋爱指数：{{Number(weekData.loveNum)*100}}%</view>
								<view class="allTitle">工作运势</view>
								<view class="allClassStr">{{weekData.career}}</view>
								<view class="allTitle">健康运势</view>
								<view class="allClassStr">{{weekData.health}}</view>
								<view class="allTitle">财富运势</view>
								<view class="allClassStr">{{weekData.money}}</view>
								<view class="allTitle">恋爱运势</view>
								<view class="allClassStr">{{weekData.love}}</view>
							</view>
							<view class="todayClass" v-if="dateChoose == 4">
								<view class="allTitle">工作运势</view>
								<view class="allClassStr">{{monthData.career}}</view>
								<view class="allTitle">健康运势</view>
								<view class="allClassStr">{{monthData.health}}</view>
								<view class="allTitle">财富运势</view>
								<view class="allClassStr">{{monthData.money}}</view>
								<view class="allTitle">恋爱运势</view>
								<view class="allClassStr">{{monthData.love}}</view>
							</view>
							<view class="todayClass" v-if="dateChoose == 5">
								<view class="allTitle">综合运势</view>
								<view class="allClassStr">{{yearData.summary}}</view>
								<view class="allTitle">工作运势</view>
								<view class="allClassStr">{{yearData.career}}</view>
								<view class="allTitle">财富运势</view>
								<view class="allClassStr">{{yearData.money}}</view>
								<view class="allTitle">恋爱运势</view>
								<view class="allClassStr">{{yearData.love}}</view>
							</view>
						</view>
						<view class="popupContent-right">
							<view>
								<view :class="{dateChoose:dateChoose == 1}" @click="dateChooseFn(1)">今<br/>日</view>
								<view :class="{dateChoose:dateChoose == 2}" @click="dateChooseFn(2)">明<br/>日</view>
								<view :class="{dateChoose:dateChoose == 3}" @click="dateChooseFn(3)">本<br/>周</view>
								<view :class="{dateChoose:dateChoose == 4}" @click="dateChooseFn(4)">本<br/>月</view>
								<view :class="{dateChoose:dateChoose == 5}" @click="dateChooseFn(5)">今<br/>年</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uCharts from '../../components/uCharts/u-charts.js';
	import {getConstellation} from '../../api/API/api.js'
	var uChartsInstance = {};
	export default {
		onShareAppMessage: function (res) {
			var that = this;
			return {
				title: '会快记.星座运势',
				path: '/pages/Constellation/constellation?id=',
				success: function (res) {
					// 转发成功
					uni.showToast({
						title: '转发成功',
						icon: 'none',
						duration: 1500
					})
				},
				fail: function (res) {
					// 转发失败
					uni.showToast({
						title: '转发失败',
						icon: 'none',
						duration: 1500
					})
				}
			}
		},
		onShareTimeline: function (res) {
			return {
				title: '会快记.星座运势',
				path: '/pages/Constellation/constellation?id=',
				success: function (res) {
					// 转发成功
					uni.showToast({
						title: '转发成功',
						icon: 'none',
						duration: 1500
					})
				},
				fail: function (res) {
					// 转发失败
					uni.showToast({
						title: '转发失败',
						icon: 'none',
						duration: 1500
					})
				}
			}
		},
		data() {
			return {
				constellationImgArr:[
					{"astroid": 1,"astroname": "白羊座","date": "3.21~4.19","pic": "../../static/constellations/白羊座1.png",
					"fhxz":"白羊座符号象征着新的开始","fhnl":"控制。由于白羊座的上进心强，有时难免冲动，忽略他人的感受",
					"fhms":"白羊座的象征是一头公羊，也可以诠释成公羊的角和鼻子。白羊座始于春季的第一天，象征一个新的开始新生的绿芽，表现出大地新生和欣欣向荣的景象",
					"xztz":'领导者型',"xgtz":['热情','冲动','自信'],"shs":'阿瑞斯、玛尔斯',"shts":'呼唤爱与智慧·马基达尔',
					"xgms":'白羊座的人冲动、慷慨、爱冒险、天不怕地不怕，而且一旦决定，不到黄河心不死，为了要达到目的，他是会排除万难。白羊座的男人是典型的大男人主义者，他们不会要别人的同情或帮助，一定要靠自己去开创自己的成功；而白羊座的女人亦都是不会甘心做全职的家庭主妇',
					"xgmy":'将心比心才能创造双赢',"xzh":'樱花、雏菊',"shx":'火星',"xzhy":'生命、幸福一生一世、暗恋',
					"url":'http://api.jisuapi.com/astro/static/images/baiyang.png',
					},
					{"astroid": 2,"astroname": "金牛座","date": "4.20~5.20","pic": "../../static/constellations/金牛座1.png",
					"fhxz":"金牛座符号象征着力量","fhnl":"丰富。金牛座符号体现了按部就班，从容淡定，但难免由于太固执而失去朋友",
					"fhms":"星座符号中的圆型代表着金星的出现，顾名思义金牛在黄道十二宫中代表“生产”，凡是能产生满足人们物质需要的各种设施、活动都属于它管辖范围",
					"xztz":'组织者型',"xgtz":['固执','耐心','缓慢'],"shs":'阿佛洛狄忒、维纳斯',"shts":'戒律与处罚·阿斯莫德',
					"xgms":'金牛座是保守型的星座，他不喜欢变动，安稳是他的生活态度。由於缺乏安全感，失业是金牛座最怕面对的问题，代表他们的生活失去重心；男的金牛座有潜在的大男人主义，在家中他们不多发言，但对尊严他们很重视，而女的金牛座除了实际之外，会喜爱打扮自己',
					"xgmy":'辛勤耕耘者才能欢呼收获',"xzh":'牵牛花、康乃馨',"shx":'金星',"xzhy":'爱情永固、母爱、热情',
					"url":'http://api.jisuapi.com/astro/static/images/jinniu.png',
					},
					{"astroid": 3,"astroname": "双子座","date": "5.21~6.21","pic": "../../static/constellations/双子座1.png",
					"fhxz":"双子座符号象征着智慧","fhnl":"掌握。双子座经常一心二用，兴趣广泛，但有时难免了解的不太深刻",
					"fhms":"双子座的星座符号是像Ⅱ的两根的平行直线，两头再以两根较短的横条封口，代表着CASTO与PULLUX这两颗永不分离的孪生星星，常被看成正反两面的象征，譬如对与错，施与受，教和学等",
					"xztz":'传授者型',"xgtz":['多变','好奇','花心'],"shs":'赫尔墨斯、墨丘利',"shts":'潜力天使·安比尔',
					"xgms":'双子座的人最喜爱变化，不可能同一时间只做一件事，心不在焉，五时花六时变；虽然有些聪明，但不专一，往往流於肤浅，持久力又低，成功很难，可以说是理性但不安分的星座',
					"xgmy":'真实的言语没有敌人',"xzh":'羊齿蕨、仙人掌、紫玫瑰',"shx":'水星',"xzhy":'勤劳、愉快、将爱进行到底、爱做梦',
					"url":'http://api.jisuapi.com/astro/static/images/shuangzi.png',
					},
					{"astroid": 4,"astroname": "巨蟹座","date": "6.22~7.22","pic": "../../static/constellations/巨蟹座1.png",
					"fhxz":"巨蟹座符号象征着坚强","fhnl":"热情。外表时常冷漠的巨蟹座，内心充满善意和温情，应该适当的释放出来",
					"fhms":"巨蟹座的星座符号就像是一只顶着硬壳的可爱小螃蟹横行的模样，有些占星家则认为，巨蟹座的星座符号像是两只对峙的小螃蟹，平衡着一个至日的起点，太阳在夏日的第一天进入巨蟹座开始夏至",
					"xztz":'领导者型',"xgtz":['温柔','善良','怜悯'],"shs":'阿尔忒弥斯、狄安娜',"shts":'审视与判定·穆里尔',
					"xgms":'情绪化，记忆力很强，体贴及亲切，在十二星座中，巨蟹座是最坚持到底的星座，他对朋友和爱人都很忠实及执着，对家庭重视度很高，而且他是最喜欢收集储存东西，对任何事物都不舍不弃，以及他们对美好事物的品味也相当高',
					"xgmy":'谋定而后动',"xzh":'昙花、百合、夜来香',"shx":'月亮',"xzhy":'一瞬即永恒、纯洁的心、清纯、心心相印、美好',
					"url":'http://api.jisuapi.com/astro/static/images/juxie.png',
					},
					{"astroid": 5,"astroname": "狮子座","date": "7.23~8.22","pic": "../../static/constellations/狮子座1.png",
					"fhxz":"狮子座符号象征着权力","fhnl":"清醒。狮子座很多地方比较优秀，也较有魅力，但容易虚荣和骄傲，需要清醒",
					"fhms":"狮子座的星座符号是黄道十二宫中最简单辨认的了，就是一条狮子尾巴",
					"xztz":'组织者型',"xgtz":['慷慨','大方','自大'],"shs":'阿波罗',"shts":'太阳守护使·凡基尔',
					"xgms":'在他身上处处显露阳光、热情、自信、大方都是他的特质。而且天生的领导才能令他喜欢指挥别人和有强大的组织能力。不过过份自信变成自大，加上固执性格，反应夸张，有时令人不知如何与他相处',
					"xgmy":'多做事少说话',"xzh":'向日葵、金盏花',"shx":'太阳',"xzhy":'沉默的爱、爱慕、悲伤嫉妒、离别之痛',
					"url":'http://api.jisuapi.com/astro/static/images/shizi.png',
					},
					{"astroid": 6,"astroname": "处女座","date": "8.23~9.22","pic": "../../static/constellations/处女座1.png",
					"fhxz":"处女座符号象征着美丽","fhnl":"分析。处女座总是追求完美，要懂得分析不容得有瑕疵",
					"fhms":"处女座的星座符号可能是十二个星座符号中最难懂的，它与天蝎座符号十分相似，差别只是处女座符号上加上一个倒“v”，占星家认为，处女座的符号，就像是一位手持一串谷物的处女，而他们手中的每一粒谷物，都象征着由经验的田野中所收获的智慧果实",
					"xztz":'传授者型',"xgtz":['精致','挑剔','认真'],"shs":'赫尔墨斯、墨丘利',"shts":'纯真无邪的守护使·哈玛利尔',
					"xgms":'处女座的人追求完美，挑剔和神经紧张，吹毛求疵。处女座的人大都很谦虚，他们踏实勤力而不肤浅，但很容易为自己带来压力。处女座的人都喜欢忙碌，但有时缺乏自信',
					"xgmy":'为人处世要外圆内方',"xzh":'紫薇、葱兰、文心兰',"shx":'水星',"xzhy":'沉迷的爱、好运、初恋、快乐无忧',
					"url":'http://api.jisuapi.com/astro/static/images/chunv.png',
					},
					{"astroid": 7,"astroname": "天秤座","date": "9.23~10.23","pic": "../../static/constellations/天秤座1.png",
					"fhxz":"天秤座符号象征着平衡","fhnl":"衡量。公平是天秤座的优点，但要知道每个人心中的公平都不一样，没有标准",
					"fhms":"天秤座的星座符号可以说是一令人一目了然，一看就知道是一把四平八稳的秤，要求的就是如何取得两方平衡的天秤",
					"xztz":'领导者型',"xgtz":['优雅','公正','平和'],"shs":'阿佛洛狄忒、维纳斯',"shts":'支配地狱之火·乌列',
					"xgms":'天秤座的人外型优雅、亲切善良、对人慷慨、朋友缘极好、喜欢听别人倾诉，沟通力又强，只不过有犹豫不决的最大毛病。为仪态优雅冷静多谋，是天生的绅士淑女，凡事保持中庸态度待人处事公正，但依赖心强有逃避现实的倾向',
					"xgmy":'不要妄下断言',"xzh":'非洲菊、猫尾花、海芋',"shx":'金星',"xzhy":'互敬互爱、努力、简单',
					"url":'http://api.jisuapi.com/astro/static/images/tianping.png',
					},
					{"astroid": 8,"astroname": "天蝎座","date": "10.24~11.22","pic": "../../static/constellations/天蝎座1.png",
					"fhxz":"天蝎座符号象征着神秘","fhnl":"思考。天蝎座孤傲、冷漠，因此思考能力较强",
					"fhms":"天蝎座的星座符号看起来就像是一只翘着尾巴的毒蝎子，但对于许多西方占星家的眼中，天蝎座的符号其实是“蛇”，因为蛇在上古时代即被视做“智慧”和“罪恶”的象征，众所皆知的的是，人类的始祖亚当、夏娃会被驱逐出伊甸园的主要罪魁祸首就是受不了蛇的引诱，才会吃下智慧果铸成大错",
					"xztz":'组织者型',"xgtz":['爱憎','冷酷','神秘'],"shs":'哈迪斯、普鲁托',"shts":'收获与分配·巴比尔',
					"xgms":'天蝎座有神秘的特质，令人变得残酷、阴险。天蝎座的人给人一种精力旺盛、热情、善妒、占有欲强的特质。十二星座之中，天蝎座是最性感的，也是最记仇的，切忌得罪他们',
					"xgmy":'居安思危',"xzh":'剑兰、文竹',"shx":'冥王星',"xzhy":'怀念之情、用心、永远不变',
					"url":'http://api.jisuapi.com/astro/static/images/tianxie.png',
					},
					{"astroid": 9,"astroname": "射手座","date": "11.23~12.21","pic": "../../static/constellations/射手座1.png",
					"fhxz":"射手座符号象征着坦率","fhnl":"直觉。射手座比较深刻，有时冷漠，但是射手座直觉能力较强",
					"fhms":"射手座的符号象征射手的箭，回到象形的简单形式；由射手座的神话可以看出射手座的智慧和爱好自由。射手的原型是拿弓箭的人马，下半身的马象征追求绝对自由，上半身的人象征知识和智慧，而手中的箭，则表现出射手的攻击性和伤人的一面",
					"xztz":'传授者型',"xgtz":['乐观','自由','粗心'],"shs":'宙斯、朱庇特',"shts":'解脱与自由·阿德那基尔',
					"xgms":'射手座的人乐观、诚实、热情、喜欢挑战，不过很容易浮躁不安，鲁莽行事，有时意志力薄弱。他是十二宫星座的冒险家，热爱旅行、喜欢赌博性的活动',
					"xgmy":'知福、惜福、造福',"xzh":'蝴蝶兰、天堂鸟',"shx":'木星',"xzhy":'我爱你、幸福向你飞来、自由、潇洒',
					"url":'http://api.jisuapi.com/astro/static/images/sheshou.png',
					},
					{"astroid": 10,"astroname": "摩羯座","date": "12.22~1.19","pic": "../../static/constellations/摩羯座1.png",
					"fhxz":"摩羯座符号象征着坚韧","fhnl":"放松。摩羯座总是有登峰的欲求，不要太过紧张，放松平静下来可能效果更理想",
					"fhms":"摩羯座的星座符号像是一笔划出山羊外形特征的一种古代象形文字，骨瘦如柴的身躯，却有攀登绝壁坚强的意志忍耐力，代表认真踏实的个性，而符号中有着山羊的头和胡须，其实摩羯座代表着就是山羊，而山羊本来就是一种个性非常强韧，且刻苦耐劳的动物",
					"xztz":'领导者型',"xgtz":['古板','稳重','严肃'],"shs":'潘恩',"shts":'高尚与领悟·汉尼尔',
					"xgms":'摩羯座是十二星座中最有耐心、小心的星座，凡事都脚踏实地，固执可以说是他们最大的特质。当然他们亦是最孤独的一个星座。一个典型的摩羯座人士，最重视就是自己的面子，在外表你永远不知道他内心的想法',
					"xgmy":'想得到爱必定要先爱自己',"xzh":'梅花、山茶花',"shx":'土星',"xzhy":'坚毅、高风亮节、可恶、忍让',
					"url":'http://api.jisuapi.com/astro/static/images/mojie.png',
					},
					{"astroid": 11,"astroname": "水瓶座","date": "1.20~2.18","pic": "../../static/constellations/水瓶座1.png",
					"fhxz":"水瓶座符号象征着叛逆","fhnl":"坚持。天赋可能让水瓶座比一些人更优秀，但多数成功来自点点滴滴的努力",
					"fhms":"水瓶座的符号象徵水和空气的波，是具象但又抽象的；由水瓶座的神话中，可以看出水瓶座的爱好自由和个人主义。象征水瓶座的波，是高度知性的代表，由波的特性去思考水瓶座的特质，看似有规律但没有具体的形象",
					"xztz":'组织者型',"xgtz":['智慧','独特','叛逆'],"shs":'乌拉诺斯、雅典娜、密涅瓦',"shts":'大天使长·加百列',
					"xgms":'水瓶座最大的特点就是革新，是个人主义最重的一个星座，追求属于自己独一无二的生活方式，是他的生活态度。但他又会偏向顽固一面，有时令人捉摸不定，不过注重人道主义的水瓶座对人友善，亦重视私隐，这一切皆由于天王星的影响',
					"xgmy":'在对的方向上努力才有意义',"xzh":'风信子、水仙',"shx":'天王星',"xzhy":'永远的怀念、自恋、陶醉',
					"url":'http://api.jisuapi.com/astro/static/images/shuiping.png',
					},
					{"astroid": 12,"astroname": "双鱼座","date": "2.19~3.20","pic": "../../static/constellations/双鱼座1.png",
					"fhxz":"双鱼座符号象征着复杂","fhnl":"信心。双鱼座总是很彷徨，理想与现实的彷徨，感情的彷徨，要学会选择，可能并没有真正的对与错",
					"fhms":"双鱼座的星座符号是两道弧，中间靠一道直线将它们串联起来，看起来就像是两条绑在一起的鱼，一条往上游去，另一条则向下游，完全背道而驰却因中间的一线相连，无论怎么拼命，结果还是无法分离，正好明显的点出双鱼座的两重人生",
					"xztz":'传授者型',"xgtz":['幻想','奉献','多情'],"shs":'波塞冬、尼普顿',"shts":'幸运天使·巴其尔',
					"xgms":'健忘、多愁善感、爱幻想、自欺欺人等等都是双鱼座的形容词，不过双鱼座最大的优点是具有奉献精神，他最喜欢帮助人，愿意牺牲自己而为别人，不过不要以为他很伟大，其实只是他藉着帮助别人而突出自己的肯定价值，可见他们多么没有信心',
					"xgmy":'相信你的直觉顺着流走',"xzh":'金鱼花、爱丽丝',"shx":'海王星',"xzhy":'不能停止想你、爱的留言、优美',
					"url":'http://api.jisuapi.com/astro/static/images/shuangyu.png',
					},
				],
				astroid:0,
				constellation:'',
				constellationNameArr:null,
				cWidth: 370,
				cHeight: 420,
				uWidth: 130,
				uHeight: 130,
				pixelRatio: 2,
				todayData: null,
				todayDataArr:[],
				tomorrowData: null,
				tomorrowDataArr:[],
				isMonthChoose: 1,
				weekData: null,
				monthData: null,
				yearData: null,
				sumTalk: null,
				autoplay: true,
				interval: 5000,
				duration: 800,
				popupKey: 1,
				dateChoose: 1,
			}
		},
		onShow() {
			let value = uni.getStorageSync('constellation');
			if (value) {
				this.astroid = Number(value)
				this.getConstellationData()
			}else{
				this.constellation = ''
				this.constellationNameArr = null
				this.astroid = 0
			}
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(370);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(310);
			this.uWidth = uni.upx2px(130);
			this.uHeight = uni.upx2px(130);
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
		},
		methods: {
			dateChooseFn(key){
				this.dateChoose = key
			},
			openPopup(key){
				this.popupKey = key
				this.$refs.detailPopup.open('bottom')
			},
			closePopup(){
				this.$refs.detailPopup.close()
			},
			changeIndicatorDots(e) {
			    this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
			    this.autoplay = !this.autoplay
			},
			intervalChange(e) {
			    this.interval = e.target.value
			},
			durationChange(e) {
			    this.duration = e.target.value
			},
			async getConstellationData(){
				let constellationValue = uni.getStorageSync('constellationValue');
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				month = (month > 9) ? month : ('0' + month);
				day = (day < 10) ? ('0' + day) : day;
				var today = year + '-' + month + '-' + day;
				let obj = {}
				obj[today] = {}
				if(!constellationValue){
					uni.setStorageSync('constellationValue', JSON.stringify(obj))
				}else{
					constellationValue = JSON.parse(constellationValue)
					let constellationKey = Object.keys(constellationValue)
					if(constellationKey[0] === today){
						let constellationTodayKey = Object.keys(constellationValue[today])
						let bool = false
						for(let i = 0; i < constellationTodayKey.length; i++){
							if(constellationTodayKey[i] == this.astroid){
								bool = true
							}
						}
						if(bool){
							//数据直接赋值构表
							this.getNewData(constellationValue[today][this.astroid])
							return
						}
					}else{
						uni.setStorageSync('constellationValue', JSON.stringify(obj))
					}
				}
				let constellationValueOld = uni.getStorageSync('constellationValue');
				constellationValueOld = JSON.parse(constellationValueOld)
				
				let postData = {'astroid':this.astroid,'date':''}
				let res = await getConstellation(postData)
				if(res.data.msg !== 'ok'){
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					this.changeConstellation()
					return
				}
				this.getNewData(res.data.result)
				constellationValueOld[today][res.data.result.astroid] = res.data.result
				uni.setStorageSync('constellationValue', JSON.stringify(constellationValueOld))
			},
			getNewData(data){
				this.todayData = data.today
				this.todayDataArr = []
				this.todayDataArr[0] = Number(data.today.summary) || (Math.floor(Math.random()*5)+1)
				this.todayDataArr[1] = Number(data.today.career) || (Math.floor(Math.random()*5)+1)
				this.todayDataArr[2] = Number(data.today.love) || (Math.floor(Math.random()*5)+1)
				this.todayDataArr[3] = Number(data.today.money) || (Math.floor(Math.random()*5)+1)
				this.todayDataArr[4] = Number(data.today.health) || (Math.floor(Math.random()*5)+1)
				
				this.tomorrowData = data.tomorrow
				this.tomorrowDataArr = []
				//5完美，4很好，3还行，2一般，1偏差, 0
				let arr = [
					{"name":'综合',stars:4,progress:0.6,str:'很好'},
					{"name":'工作',stars:3,progress:0.6,str:'还行'},
					{"name":'健康',stars:4,progress:0.8,str:'很好'},
					{"name":'财运',stars:5,progress:1,str:'完美'},
					{"name":'爱情',stars:2,progress:0.6,str:'一般'},
				]
				arr[0].stars = Number(data.tomorrow.summary)
				arr[1].stars = Number(data.tomorrow.career)
				arr[2].stars = Number(data.tomorrow.health)
				arr[3].stars = Number(data.tomorrow.money)
				arr[4].stars = Number(data.tomorrow.love)
				for(let i = 0; i < arr.length; i++){
					if(!arr[i].stars){
						arr[i].stars = Math.floor(Math.random()*5)+1
					}
					switch(arr[i].stars) { 
					    case 0: 
							arr[i].str = '较差';
					    	break;
					    case 1:
					    	arr[i].str = '偏差';
					    	break;
					    case 2:
					    	arr[i].str = '一般';
					    	break;
						case 3:
							arr[i].str = '还行';
							break;
						case 4:
							arr[i].str = '很好';
							break;
						case 5:
							arr[i].str = '完美';
							break;
					}
				}
				this.tomorrowDataArr = arr
				this.weekData = data.week
				this.monthData = data.month
				this.yearData = data.year
				this.sumTalk = this.weekData;
				this.isMonthChoose = 1
				this.constellation = this.constellationImgArr[this.astroid-1].astroname
				this.constellationNameArr = this.constellation.split('')
				this.getWeekData(data)
				setTimeout(() => {
					this.getServerData();
				},500)
			},
			async getWeekData(data){
				let weekDate = data.week.date
				let dateMol = weekDate.slice(0,8)
				let oldDay = weekDate.slice(8,10)
				let newDay = Number(oldDay)
				if(newDay > 25){
					dateMol = dateMol + '' + newDay
				}else{
					newDay = Number(newDay) + 3
					dateMol = dateMol + '' + newDay
				}
				let constellationWeek = uni.getStorageSync('constellationWeek');
				let obj = {}
				obj[dateMol] = {}
				if(!constellationWeek){
					uni.setStorageSync('constellationWeek', JSON.stringify(obj))
				}else{
					constellationWeek = JSON.parse(constellationWeek)
					let constellationKey = Object.keys(constellationWeek)
					if(constellationKey[0] === dateMol){
						let constellationTodayKey = Object.keys(constellationWeek[dateMol])
						let bool = false
						for(let i = 0; i < constellationTodayKey.length; i++){
							if(constellationTodayKey[i] == this.astroid){
								bool = true
							}
						}
						if(bool){
							setTimeout(() => {
								this.getServerData1(constellationWeek[dateMol][this.astroid])
							},500)
							return
						}
					}else{
						uni.setStorageSync('constellationWeek', JSON.stringify(obj))
					}
				}
				let constellationWeekOld = uni.getStorageSync('constellationWeek');
				constellationWeekOld = JSON.parse(constellationWeekOld)
				
				let postData = {'astroid':this.astroid,'date':dateMol}
				let res = await getConstellation(postData)
				if(res.data.msg !== 'ok'){
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					this.changeConstellation()
				}
				setTimeout(() => {
					this.getServerData1(res.data.result.today);
				},500)
				constellationWeekOld[dateMol][res.data.result.astroid] = res.data.result.today
				uni.setStorageSync('constellationWeek', JSON.stringify(constellationWeekOld))
				
			},
			changeMonthChoose(key){
				this.isMonthChoose = key
				this.sumTalk = {}
				switch(key) {
				    case 1:
				    	this.sumTalk = this.weekData;
				    	break;
				    case 2:
				    	this.sumTalk = this.monthData;
				    	break;
					case 3:
						this.sumTalk = this.yearData;
						break;
				}
			},
			changeConstellation(){
				this.astroid = 0
				uni.setStorageSync('constellation', 0)
				this.constellation = ''
				this.constellationNameArr = null
			},
			chooseConstellation(id,name){
				this.astroid = id
				uni.setStorageSync('constellation', this.astroid)
				this.getConstellationData()
			},
			getServerData() {
				let that = this
				let res = {
				    categories: ["综合","事业","爱情","财运","健康"],
				    series: [
				      {
				        name: "指数",
				        data: that.todayDataArr
				      }
				    ]
				  };
				this.drawCharts('todayDataCanvasId', res);
			},
			getServerData1(data) {
				let that = this
				let weekData = data
				let resWork = {series: [{name: "事业",color: "#3584ab",data: 0.6}]};
				let resHealth = {series: [{name: "健康",color: "#3584ab",data: 0.2}]};
				let resMoney = {series: [{name: "财运",color: "#3584ab",data: 0.4}]};
				let resLove = {series: [{name: "爱情",color: "#3584ab",data: 0.8}]};
				if(weekData.career){
					resWork.series[0].data = Number(weekData.career)/5
					resHealth.series[0].data = Number(weekData.health)/5
					resMoney.series[0].data = Number(weekData.money)/5
					resLove.series[0].data = Number(weekData.love)/5
				}
				this.weekData.careerNum = resWork.series[0].data
				this.weekData.healthNum = resHealth.series[0].data
				this.weekData.moneyNum = resMoney.series[0].data
				this.weekData.loveNum = resLove.series[0].data
				this.drawCharts1('weekWorkId', resWork);
				this.drawCharts1('weekHealthId', resHealth);
				this.drawCharts1('weekMoneyId', resMoney);
				this.drawCharts1('weekLoveId', resLove);
			},
			drawCharts1(id,data){
			      const query = uni.createSelectorQuery().in(this);
			      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
			        if (res[0]) {
			          const canvas = res[0].node;
			          const ctx = canvas.getContext('2d');
			          canvas.width = res[0].width * this.pixelRatio;
			          canvas.height = res[0].height * this.pixelRatio;
			          uChartsInstance[id] = new uCharts({
			            type: "arcbar",
			            context: ctx,
			            width: this.uWidth * this.pixelRatio,
			            height: this.uHeight * this.pixelRatio,
			            series: data.series,
			            pixelRatio: this.pixelRatio,
			            animation: true,
			            background: "#101b48",
			            padding: undefined,
			            title: {
			              name: data.series[0].data * 100 + '%',
			              fontSize: 10,
			              color: data.series.color
			            },
			            subtitle: {
			              name: data.series[0].name,
			              fontSize: 10,
			              color: data.series[0].color
			            },
			            extra: {
			              arcbar: {
			                type: "circle",
			                width: 8,
			                backgroundColor: "#101b48",
			                startAngle: 1.5,
			                endAngle: 0.25,
			                gap: 2
			              }
			            }
			          });
			        }else{
			          console.error("[uCharts]: 未获取到 context");
			        }
			      });
			    },
			drawCharts(id,data){
			  const query = uni.createSelectorQuery().in(this);
			  query.select('#' + id).fields({ node: true, size: true }).exec(res => {
			    if (res[0]) {
			      const canvas = res[0].node;
			      const ctx = canvas.getContext('2d');
			      canvas.width = res[0].width * this.pixelRatio;
			      canvas.height = res[0].height * this.pixelRatio;
			      uChartsInstance[id] = new uCharts({
			        type: "radar",
			        context: ctx,
			        width: this.cWidth * this.pixelRatio,
			        height: this.cHeight * this.pixelRatio,
			        categories: data.categories,
			        series: data.series,
			        pixelRatio: this.pixelRatio,
			        animation: true,
			        color: ["#52bdff"],
			        padding: [-5,-5,-5,-5],
			        dataLabel: false,
			        enableScroll: false,
					fontSize:10,
			        legend: {
			          show: false,
			        },
			        extra: {
			          radar: {
			            gridType: "radar",
			            // gridColor: "#ffffff",
			            gridCount: 3,
			            opacity: 0.3,
			            max: 5,
			            labelShow: true,
			            border: true,
						borderWidth: 1,
						labelPointRadius: 1,
						labelPointColor: '#4db4ef',
			          }
			        }
			      });
			    }else{
			      console.error("[uCharts]: 未获取到 context");
			    }
			  });
			},
			tap(e){
			  uChartsInstance[e.target.id].touchLegend(e);
			  uChartsInstance[e.target.id].showToolTip(e);
			},  
			backNext(){
				uni.navigateBack({
					delta: 1,
					fail(err) {
						uni.reLaunch({
							url: '../index/index'
						});
					}
				});
			}
		}
	};
</script>

<style>
	.detailPopup {
		width: 100%;
		background-color: rgba(16, 27, 72, 1.0);
		border-radius: 16rpx 16rpx 0 0;
	}
	
	.detailPopup .popupHead {
		position: relative;
		z-index: 9999999999;
		height: 70rpx;
		width: 100%;
		border-bottom: 1rpx solid rgba(200, 200, 200, 0.1);
	}
	
	.detailPopup .popupHead > view{
		height: 70rpx;
		width: 70rpx;
		margin-right: 16rpx;
		line-height: 60rpx;
		color: rgba(200, 200, 200, 0.5);
		float: right;
		font-size: 50rpx;
		text-align: right;
	}
	
	.detailPopup .popupContent {
		position: relative;
		z-index: 9999999999;
		width: 100%;
		height: 70vh;
		overflow-x: hidden;
		overflow-y: scroll;
		padding-bottom: 10vh;
		box-sizing: border-box;
	}
	
	.popupContent1{
		position: relative;
		z-index: 9999999999;
		width: 100%;
		height: 70vh;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	
	.popupContent1 .popupContent-left{
		width: 600rpx;
		height: 65vh;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	
	.popupContent1 .popupContent-left .todayClass{
		width: 600rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly
	}
	
	.popupContent1 .popupContent-left .todayClass > view{
		width: 250rpx;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		color: rgba(100, 204, 255, 0.7);
	}
	
	.popupContent1 .popupContent-left .todayClass .todayClassStr{
		width: 600rpx;
		/* padding: 0 25rpx; */
		line-height: 36rpx;
		font-size: 26rpx;
		color: rgba(100, 204, 255, 0.5);
		text-indent: 2em;
		text-align: justify;
	}
	
	.popupContent1 .popupContent-left .todayClass .allTitle{
		width: 600rpx;
		font-size: 30rpx;
		color: rgba(100, 204, 255, 0.7);
		font-weight: 500;
	}
	
	.popupContent1 .popupContent-left .todayClass .allClassStr{
		width: 600rpx;
		height: auto;
		line-height: 36rpx;
		font-size: 26rpx;
		color: rgba(100, 204, 255, 0.5);
		text-indent: 2em;
		text-align: justify;
	}
	
	.popupContent1 .popupContent-right{
		width: 100rpx;
		height: 65vh;
	}
	
	.popupContent1 .popupContent-right > view{
		margin: 0 10rpx;
		width: 80rpx;
		height: 65vh;
		border-radius: 40rpx;
		border: 1rpx solid rgba(100, 204, 255, 0.6);
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.popupContent1 .popupContent-right > view > view{
		width: 80rpx;
		height: 13vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		line-height: 32rpx;
		color: rgba(100, 204, 255, 0.5);
		border-bottom: 1rpx solid rgba(100, 204, 255, 0.6);
		box-sizing: border-box;
	}
	
	.dateChoose{
		color: rgba(255, 255, 255, 0.9);
		background-color: rgba(100, 204, 255, 0.6);
	}
	
	.detailPopup .popupContent .contentHeader{
		width: 750rpx;
		height: 250rpx;
		box-sizing: border-box;
		padding: 10rpx 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: aqua; */
	}
	
	.popupContent .contentHeader .contentHeader-img{
		width: 200rpx;
		height: 200rpx;
		box-sizing: border-box;
		padding: 25rpx 25rpx 5rpx 5rpx;
	}
	
	.popupContent .contentHeader .contentHeader-img > image{
		width: 170rpx;
		height: 170rpx;
		background-color: rgba(11, 19, 53, 1.0);
		border-radius: 18rpx;
		opacity: 0.6;
	}
	
	.popupContent .contentHeader .contentHeader-cont{
		width: 500rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.contentHeader .contentHeader-cont .cont-str1{
		width: 500rpx;
		height: 70rpx;
		font-size: 32rpx;
		line-height: 70rpx;
		color: rgba(100, 204, 255, 0.7);
	}
	
	.contentHeader .contentHeader-cont .cont-str2{
		width: 500rpx;
		height: 50rpx;
		display: flex;
	}
	
	.contentHeader .contentHeader-cont .cont-str2 > view{
		height: 40rpx;
		padding: 0 20rpx;
		line-height: 40rpx;
		background-color: rgba(11, 9, 52, 1.0);
		border-radius: 20rpx;
		color: rgba(100, 204, 255, 0.5);
		font-size: 22rpx;
		margin: 0 6rpx;
	}
	
	.contentHeader .contentHeader-cont .cont-str3{
		width: 500rpx;
		font-size: 26rpx;
		line-height: 34rpx;
		color: rgba(100, 204, 255, 0.7);
	}
	
	.contentFoot-cont{
		width: 750rpx;
		box-sizing: border-box;
		padding: 6rpx 22rpx;
	}
	
	.contentFoot-cont .contentFoot-cont-title{
		width: 100%;
		font-size: 28rpx;
		line-height: 50rpx;
		color: rgba(100, 204, 255, 0.5);
	}
	
	.contentFoot-cont .contentFoot-cont-str{
		width: 100%;
		font-size: 26rpx;
		line-height: 34rpx;
		text-indent: 2em;
		box-sizing: border-box;
		padding: 10rpx;
		color: rgba(100, 204, 255, 0.4);
		text-align: justify;
	}
	
	.uni-margin-wrap {
		width: 710rpx;
		margin: 10rpx;
		height: calc(70vh - 710rpx);
	}
	.swiper {
		width: 710rpx;
		height: calc(70vh - 710rpx);
	}
	.swiper-item {
		display: block;
		width: 710rpx;
		height: calc(70vh - 710rpx);
	}
	
	.swiper1{
		display: flex;
	}
	
	.swiper1 .swiper1-left{
		width: 250rpx;
		height: calc(70vh - 710rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.8;
	}
	
	.swiper1 .swiper1-left .constellation-img{
		width: 200rpx;
		height: 200rpx;
		position: relative;
		margin: auto;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(57, 36, 141, 0.7);
		/* backdrop-filter: blur(30rpx); */
		border: 4rpx solid rgba(57, 36, 141, 1.0);
		/* box-shadow: rgba(142, 142, 142, 0.3) 0rpx 12rpx 30rpx 0rpx; */
		box-shadow: rgba(83, 204, 255, 0.4) 0rpx 2rpx 6rpx 6rpx;
		overflow: hidden;
	}
	
	.swiper1 .swiper1-left .constellation-img::after{
		content: '';
		width: 160rpx;
		height: 240rpx;
		position: absolute;
		left: -20rpx;
		top: 60rpx;
		z-index: 100;
		border-radius: 100%;
		background-color: rgba(133, 39, 240, 0.15);
	}
	
	.swiper1 .swiper1-left .constellation-img::before{
		content: '';
		width: 150rpx;
		height: 200rpx;
		position: absolute;
		left: 100rpx;
		top: 100rpx;
		z-index: 150;
		border-radius: 100%;
		background-color: rgba(151, 46, 255, 0.2);
	}
	
	.swiper1 .swiper1-left .constellation-img .constellation-star{
		width: 4rpx;
		height: 4rpx;
		position: absolute;
		z-index: 210;
		left: 40rpx;
		top: 50rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.7);
	}
	
	.swiper1 .swiper1-left .constellation-img .constellation-star::after{
		content: '';
		width: 5rpx;
		height: 5rpx;
		position: absolute;
		z-index: 210;
		left: 70rpx;
		top: -30rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
	}
	
	.swiper1 .swiper1-left .constellation-img .constellation-star::before{
		content: '';
		width: 4rpx;
		height: 4rpx;
		position: absolute;
		z-index: 210;
		left: 130rpx;
		top: 6rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.6);
	}
	
	.swiper1 .swiper1-left .constellation-img .astro-img{
		width: 150rpx;
		margin: 0;
		height: 140rpx;
		opacity: 0.7;
		position: absolute;
		z-index: 200;
	}
	
	.swiper1 .swiper1-right{
		width: 460rpx;
		height: calc(70vh - 710rpx);
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
	}
	
	.swiper1 .swiper1-right .swiper1-right-str1{
		width: 430rpx;
		height: 40rpx;
		margin: 4rpx 10rpx;
		font-size: 28rpx;
		color: rgba(83, 204, 255, 0.8);
		line-height: 40rpx;
	}
	
	.swiper1 .swiper1-right .swiper1-right-str2{
		width: 430rpx;
		height: 50rpx;
		margin: 4rpx 10rpx;
		display: flex;
		align-items: center;
	}
	
	.swiper1-right .swiper1-right-str2 .swiperStrTip{
		padding: 0 14rpx;
		margin-right: 10rpx;
		height: 40rpx;
		border-radius: 40rpx;
		font-size: 22rpx;
		color: rgba(250, 250, 250, 0.6);
		letter-spacing: 1rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: rgba(57, 36, 141, 0.45);
	}
	
	.swiper1 .swiper1-right .swiper1-right-str3{
		width: 430rpx;
		margin: 4rpx 10rpx;
		font-size: 24rpx;
		color: rgba(83, 204, 255, 0.8);
		line-height: 32rpx;
		text-indent: 2em;
		text-align: justify;
	}
	
	.swiper2{
		display: flex;
	}
	
	.swiper2 .swiper2-left{
		width: 200rpx;
		height: calc(70vh - 710rpx);
	}
	
	.swiper2 .swiper2-left > view{
		position: relative;
		margin: 1.5vh auto 0.5vh auto;
		height: calc(20vh - 240rpx);
		width: calc(20vh - 230rpx);
		font-size: 30rpx;
		white-space: nowrap;
		font-style:oblique;
		text-align: center;
		line-height: calc(20vh - 240rpx);
		color: rgba(100, 204, 255, 0.7);
		letter-spacing: 2rpx;
		border-radius: 100%;
		border: 4rpx solid rgba(100, 204, 255, 0.5);
	}
	
	.swiper2 .swiper2-left > view::after{
		content: '';
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		top: 25%;
		left: -10rpx;
		z-index: 100;
		background-color: rgba(91, 188, 232, 1.0);
		border-radius: 100%;
	}
	
	.swiper2 .swiper2-left > view::before{
		content: '';
		width: calc(10vh - 110rpx);
		height: calc(10vh - 140rpx);
		position: absolute;
		z-index: 99;
		left: -5%;
		background-image: -webkit-linear-gradient(right, rgba(9, 16, 43, 0.5), rgba(9, 16, 43, 1), rgba(9, 16, 43, 1.0));
		/* background-color: rgba(38, 214, 103, 1.0); */
	}
	
	.swiper2 .swiper2-right{
		width: 500rpx;
		height: calc(70vh - 710rpx);
	}
	
	.swiper2 .wiper2-title{
		width: 500rpx;
		font-size: 28rpx;
		color: rgba(100, 204, 255, 0.7);
		margin: 2vh auto 10rpx auto;
		text-align: center;
		font-style:oblique;
		font-weight: 500;
		letter-spacing: 1rpx;
	}
	
	.swiper2 .wiper2-titleFoot{
		margin: 10rpx auto;
		width: 420rpx;
		height: 1rpx;
		background-color: rgba(100, 204, 255, 0.5);
	}
	
	.swiper2 .wiper2-content{
		margin: 2rpx auto;
		width: 400rpx;
		font-size: 24rpx;
		color: rgba(100, 204, 255, 0.6);
		margin: 2vh auto 10rpx auto;
		font-style:oblique;
		text-indent: 2em;
		line-height: 32rpx;
		letter-spacing: 1rpx;
		text-align: justify;
	}
	
	.swiper3{
		position: relative;
	}
	
	.swiper3 > view {
		border-radius: 16rpx;
	}
	
	.swiper3 .swiper3-center{
		position: absolute;
		z-index: 300;
		top: calc(50% - 18vh + 210rpx);
		left: calc(50% - 18vh + 210rpx);
		height: calc(36vh - 420rpx);
		width: calc(36vh - 420rpx);
		border-radius: 100%;
		border: 4rpx solid rgba(100, 204, 255, 0.5);
		background-color: rgba(9, 16, 43, 1);
		line-height: calc(36vh - 420rpx);
		text-align: center;
		font-size: 31rpx;
		color: rgba(100, 204, 255, 0.7);
		white-space: nowrap;
		letter-spacing: 1rpx;
		font-weight: 500;
	}
	
	.swiper3 .swiper3-topLeft{
		position: absolute;
		z-index: 200;
		top: 20rpx;
		left: 14rpx;
		height: calc(36vh - 420rpx);
		width: 300rpx;
		border: 2rpx solid rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-topLeft::after{
		content: '守护神';
		position: absolute;
		z-index: 210;
		left: 0;
		bottom: calc(18vh - 280rpx);
		width: 170rpx;
		height: 40rpx;
		border-top: 1rpx solid rgba(100, 204, 255, 0.3);
		color: rgba(100, 204, 255, 0.6);
		line-height: 50rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		letter-spacing: 2rpx;
		font-size: 26rpx;
	}
	
	.swiper3 .swiper3-topLeft > view{
		height: calc(36vh - 500rpx);
		width: 280rpx;
		margin: 15rpx auto;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		line-height: 38rpx;
		color: rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-topRight{
		position: absolute;
		z-index: 200;
		top: 20rpx;
		right: 14rpx;
		height: calc(36vh - 420rpx);
		width: 300rpx;
		border: 2rpx solid rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-topRight::after{
		content: '守护天使';
		position: absolute;
		z-index: 210;
		right: 0;
		bottom: calc(18vh - 280rpx);
		width: 170rpx;
		height: 40rpx;
		border-top: 1rpx solid rgba(100, 204, 255, 0.3);
		color: rgba(100, 204, 255, 0.6);
		line-height: 50rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		text-align: right;
		letter-spacing: 2rpx;
		font-size: 26rpx;
	}
	
	.swiper3 .swiper3-topRight > view{
		height: calc(36vh - 500rpx);
		width: 280rpx;
		margin: 15rpx auto;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		line-height: 38rpx;
		color: rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-botRight{
		position: absolute;
		z-index: 200;
		bottom: 20rpx;
		right: 14rpx;
		height: calc(36vh - 420rpx);
		width: 300rpx;
		border: 2rpx solid rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-botRight::after{
		content: '守护星';
		position: absolute;
		z-index: 210;
		right: 0;
		top: 0;
		width: 170rpx;
		height: 50rpx;
		border-bottom: 1rpx solid rgba(100, 204, 255, 0.3);
		color: rgba(100, 204, 255, 0.6);
		line-height: 50rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		text-align: right;
		letter-spacing: 2rpx;
		font-size: 26rpx;
	}
	
	.swiper3 .swiper3-botRight > view{
		height: calc(36vh - 500rpx);
		width: 280rpx;
		margin: 65rpx auto 15rpx auto;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		line-height: 38rpx;
		color: rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-botLeft{
		position: absolute;
		z-index: 200;
		bottom: 20rpx;
		left: 14rpx;
		height: calc(36vh - 420rpx);
		width: 300rpx;
		border: 2rpx solid rgba(100, 204, 255, 0.5);
	}
	
	.swiper3 .swiper3-botLeft::after{
		content: '星座花';
		position: absolute;
		z-index: 210;
		left: 0;
		top: 0;
		width: 170rpx;
		height: 50rpx;
		border-bottom: 1rpx solid rgba(100, 204, 255, 0.3);
		color: rgba(100, 204, 255, 0.6);
		line-height: 50rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		letter-spacing: 2rpx;
		font-size: 26rpx;
	}
	
	.swiper3 .swiper3-botLeft > view{
		height: calc(36vh - 500rpx);
		width: 280rpx;
		margin: 65rpx auto 15rpx auto;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		line-height: 38rpx;
		color: rgba(100, 204, 255, 0.5);
	}
	
	::-webkit-scrollbar {
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	}
	
	.thingsPage{
		width: 100%;
		height: 100vh;
		background-color: rgba(250, 250, 250,0.8);
	}
	
	.pageHeader{
		width: 100%;
		height: 11vh;
		position: relative;
		/* background:linear-gradient(to right ,rgba(16, 27, 72, 1.0),rgba(16, 27, 72, 0.4)); */
		background-color: rgba(16, 27, 72, 1.0);
		overflow: hidden;
	}
	
	.pageHeader .headContent{
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent > p{
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}
	
	.pageHeader .headContent .backBtn{
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		z-index: 30;
		margin-top: 1vh;
		left: 20rpx;
		font-size: 60rpx;
		font-weight: 400;
		color: rgba(190, 246, 255, 1.0);
	}
	
	.pageHeader .headContent .headContentBack1{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		/* background-color: rgba(16, 27, 72, 0.3); */
	}
	
	.pageHeader .headContent .headContentBack2{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		/* background-color: rgba(16, 27, 72, 0.5); */
	}
	
	.chooseBlock{
		position: absolute;
		width: 750rpx;
		margin: 0;
		padding-top: 30rpx;
		background-color: rgba(16, 27, 72, 1.0);
		height: 89vh;
		/* background-image: linear-gradient(to bottom,rgba(157, 133, 243, 1.0),rgba(154, 131, 238, 1.0)); */
	}
	
	.chooseBlock .chooseBlockTitle{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: rgba(27, 154, 250, 0.6);
		font-size: 24rpx;
		letter-spacing: 2rpx;
	}
	
	.chooseBlock .constellations{
		width: 100%;
		height: calc(89vh - 200rpx);
		overflow-y: scroll;
		overflow-x: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-content: space-evenly;
	}
	
	.chooseBlock .constellations .oneOfConstellations{
		width: 170rpx;
		margin: 0 10rpx;
		height: 240rpx;
		/* background-color: blue; */
	}
	
	.constellations .oneOfConstellations .constellationImgs{
		position: relative;
		width: 140rpx;
		margin: auto;
		height: 140rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(57, 36, 141, 0.7);
		/* backdrop-filter: blur(30rpx); */
		border: 4rpx solid rgba(57, 36, 141, 1.0);
		/* box-shadow: rgba(142, 142, 142, 0.3) 0rpx 12rpx 30rpx 0rpx; */
		box-shadow: rgba(255, 255, 255, 0.15) 0rpx 2rpx 6rpx 6rpx;
		overflow: hidden;
	}
	
	.constellations .oneOfConstellations .constellationImgs::after{
		content: '';
		width: 100rpx;
		height: 140rpx;
		position: absolute;
		left: -20rpx;
		top: 40rpx;
		z-index: 100;
		border-radius: 100%;
		background-color: rgba(133, 39, 240, 0.15);
	}
	
	.constellations .oneOfConstellations .constellationImgs::before{
		content: '';
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		left: 60rpx;
		top: 80rpx;
		z-index: 150;
		border-radius: 100%;
		background-color: rgba(151, 46, 255, 0.2);
	}
	
	.constellations .oneOfConstellations .constellationImg{
		width: 90rpx;
		margin: 0;
		height: 90rpx;
		position: absolute;
		z-index: 200;
	}
	
	.constellations .oneOfConstellations .constellationImgs .constellationStar{
		width: 4rpx;
		height: 4rpx;
		position: absolute;
		z-index: 210;
		left: 20rpx;
		top: 30rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.5);
	}
	
	.constellations .oneOfConstellations .constellationImgs .constellationStar::after{
		content: '';
		width: 4rpx;
		height: 4rpx;
		position: absolute;
		z-index: 210;
		left: 40rpx;
		top: -20rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.7);
	}
	
	.constellations .oneOfConstellations .constellationImgs .constellationStar::before{
		content: '';
		width: 3rpx;
		height: 3rpx;
		position: absolute;
		z-index: 210;
		left: 90rpx;
		top: 2rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.6);
	}
	
	.constellations .oneOfConstellations .constellationName{
		width: 100%;
		height: 46rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255,0.75);
		text-align: center;
		line-height: 60rpx;
		font-weight: 500;
	}
	
	.constellations .oneOfConstellations .constellationDate{
		width: 100%;
		height: 20rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: rgba(250, 250, 250,0.5);
		text-align: center;
		line-height: 20rpx;
	}
	
	.astroName{
		position: relative;
		width: 100%;
		height: 180rpx;
		/* background-color: aqua; */
	}
	
	.astroName .astroChange{
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
		top: 100rpx;
		right: 118rpx;
		color: rgba(99, 222, 255, 0.6);
	}
	
	.astroName .astroImg{
		position: absolute;
		left: calc(50% - 150rpx);
		top: -20rpx;
		width: 300rpx;
		height: 220rpx;
		opacity: 0.1;
	}
	
	.astroName .astroNameStr{
		width: 100%;
		height: 180rpx;
		line-height: 160rpx;
		font-size: 140rpx;
		font-weight: bolder;
		/* letter-spacing: -16rpx; */
		display: flex;
		justify-content: center;
	}
	
	.astroName .astroNameStr > view{
		margin: 0rpx -2rpx;
		background-image: -webkit-linear-gradient(right, rgba(82, 189, 255, 0.7), rgba(82, 189, 255, 1.0), rgba(82, 189, 255, 0.7));
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		/* -webkit-box-reflect: below -100rpx -webkit-gradient(linear, left top, left
		          bottom, from(transparent), to(rgba(250, 250, 250, 0.5))); */
	}
	
	.astroName .astroNameStr .astroNameLeftTip{
		font-weight: 400;
		margin: 0rpx -2rpx;
		font-size: 120rpx;
		background-image: -webkit-linear-gradient(left, rgba(16, 27, 72, 0), rgba(82, 189, 255, 0.8));
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.astroName .astroNameStr .astroNameRightTip{
		font-weight: 400;
		margin: 0rpx -2rpx;
		font-size: 120rpx;
		background-image: -webkit-linear-gradient(right, rgba(16, 27, 72, 0), rgba(82, 189, 255, 0.8));
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.astroContext{
		width: 100%;
		height: 73vh;
		margin-top: 2vh;
		display: flex;
		justify-content: space-evenly;
	}
	
	.astroContext .astroContextLeft{
		width: 370rpx;
		height: 72vh;
	}
	
	.astroContext .astroContextLeft .todayContext{
		width: 370rpx;
		height: 640rpx;
		border-radius: 16rpx;
		background-color: rgba(9, 16, 43, 1.0);
		overflow: hidden;
	}
	
	.astroContextLeft .todayContext .todayTitle{
		width: 370rpx;
		height: 60rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
	}
	
	.astroContextLeft .todayContext .todayDate{
		width: 370rpx;
		height: 20rpx;
		text-align: center;
		line-height: 10rpx;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.4);
	}
	
	.astroContextLeft .todayContext .todayDataCanvas{
		width: 370rpx;
		height: 350rpx;
	}
	
	.astroContextLeft .todayContext .todayDataFoot{
		width: 370rpx;
		height: 160rpx;
		display: flex;
		justify-content: space-evenly;
	}
	
	.astroContextLeft .todayContext .todayDataFoot > view{
		width: 120rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: start;
	}
	
	.astroContextLeft .todayContext .todayDataFoot > view > .todayFootData{
		width: 120rpx;
		height: 76rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 120rpx;
		color: rgba(255, 255, 255, 0.8);
		white-space: nowrap;
	}
	
	.astroContextLeft .todayContext .todayDataFoot > view > .todayFootTitle{
		width: 120rpx;
		height: 40rpx;
		font-size: 18rpx;
		text-align: center;
		line-height: 40rpx;
		letter-spacing: 1rpx;
		color: rgba(240, 240, 240, 0.6);
		white-space: nowrap;
	}
	
	.astroContext .astroContextLeft .todayTalk{
		position: relative;
		width: 370rpx;
		height: calc(71vh - 650rpx);
		margin-top: 10rpx;
		border-radius: 16rpx;
		background-color: rgba(9, 16, 43, 1.0);
	}
	
	.astroContextLeft .todayTalk .todayTalkHead{
		width: 370rpx;
		height: 70rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.todayTalk .todayTalkHead .todayTalkHeadLeft{
		width: 260rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.75);
		font-weight: 500;
	}
	
	.todayTalk .todayTalkHead .todayTalkHeadRight{
		width: 70rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 46rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 500;
		text-align: right;
	}
	
	.todayTalk .todayTalkContext{
		width: 370rpx;
		height: calc(70vh - 720rpx);
		box-sizing: border-box;
		padding: 4rpx 18rpx;
		font-size: 24rpx;
		text-indent: 2em;
		overflow-y: scroll;
		text-align: justify;
		/* text-align-last: justify; */
		/* overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		display:box;
		-webkit-box-orient:vertical;
		orient:vertical;
		-webkit-line-clamp:10; 
		line-clamp:10; */
		color: rgba(240, 240, 240, 0.7);
	}
	
	.todayTalk .allTalkContext{
		position: absolute;
		/* top: 70rpx; */
		z-index: 20;
		width: 730rpx;
		height: calc(70vh - 690rpx);
		background-color: rgba(9, 16, 43, 1.0);
		border-radius: 16rpx;
		display: flex;
	}
	
	.todayTalk .allTalkContext::after{
		content: '';
		position: absolute;
		z-index: 21;
		width: 10rpx;
		height: 10rpx;
		top: -10rpx;
		left: 370rpx;
		background-color: rgba(9, 16, 43, 1.0);
		/* background-color: aliceblue; */
	}
	
	.todayTalk .allTalkContext::before{
		content: '';
		position: absolute;
		z-index: 22;
		width: 10rpx;
		height: 10rpx;
		top: -10rpx;
		left: 370rpx;
		border-radius: 0 0 0 16rpx;
		background-color: rgba(16, 27, 72, 1.0);
		/* background-color: blue; */
	}
	
	.astroContext .astroContextRight{
		width: 350rpx;
		height: 72vh;
	}
	
	.astroContext .astroContextRight .tomorrowContext{
		width: 350rpx;
		height: 300rpx;
		border-radius: 16rpx;
		background-color: rgba(9, 16, 43, 1.0);
	}
	
	.astroContextRight .tomorrowContext .tomorrowHead{
		width: 350rpx;
		height: 70rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.tomorrowContext .tomorrowHead .tomorrowHeadLeft{
		width: 290rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
	}
	
	.tomorrowHead .tomorrowHeadLeft .tomorrowHeadStr{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 500;
		white-space: nowrap;
		margin-right: 8rpx;
	}
	
	.tomorrowHead .tomorrowHeadLeft .tomorrowHeadStar{
		width: 24rpx;
		height: 24rpx;
		margin: 0 2rpx;
		display: flex;
		justify-content: center;
	}
	
	.tomorrowHead .tomorrowHeadLeft .tomorrowHeadTip{
		width: 170rpx;
		height: 1rpx;
		/* background-image: -webkit-linear-gradient(right, rgba(16, 27, 72, 0), rgba(82, 189, 255, 0.8)); */
		background-image: -webkit-linear-gradient(right, rgba(16, 27, 72, 0), rgba(250, 250, 250, 0.8));
	}
	
	.tomorrowHead .tomorrowHeadLeft .tomorrowHeadStar > image{
		width: 24rpx;
		height: 24rpx;
	}
	
	.tomorrowContext .tomorrowHead .tomorrowHeadRight{
		width: 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 600;
		text-align: center;
		transform:rotate(-90deg);
	}
	
	.tomorrowContext .tomorrowFoot{
		width: 350rpx;
		/* height: 320rpx; */
		height: 220rpx;
		box-sizing: border-box;
		padding: 0rpx 12rpx;
		position: relative;
		top: -6rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.tomorrowContext .tomorrowFoot > view{
		width: 326rpx;
		height: 40rpx;
		display: flex;
		/* justify-content: center; */
		justify-content: space-evenly;
		align-items: center;
	}
	
	.tomorrowContext .tomorrowFoot > view .starsBlock{
		width: 150rpx;
		height: 40rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	
	.tomorrowContext .tomorrowFoot > view .starsBlock > view{
		width: 20rpx;
		height: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tomorrowContext .tomorrowFoot > view .starsBlock > view > image{
		width: 20rpx;
		height: 20rpx;
	}
	
	.tomorrowContext .tomorrowFoot > view .progressBlock{
		width: 200rpx;
		height: 40rpx;
		position: relative;
	}
	
	.tomorrowContext .tomorrowFoot > view .progressBlock > .progressBack{
		width: 190rpx;
		height: 18rpx;
		position: absolute;
		top: 13rpx;
		left: 5rpx;
		border-radius: 20rpx;
		background-color: rgba(24, 44, 117, 0.4);
	}
	
	.tomorrowContext .tomorrowFoot > view .progressBlock > .progressColor{
		height: 18rpx;
		position: absolute;
		top: 13rpx;
		left: 5rpx;
		border-radius: 20rpx;
		background-color: rgba(82, 189, 255, 0.8);
	}
	
	.tomorrowContext .tomorrowFoot > view .strBlock{
		width: 60rpx;
		height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		white-space: nowrap;
		color: rgba(82, 189, 255, 0.8);
		line-height: 40rpx;
	}
	
	.tomorrowContext .tomorrowFoot > view .strBlock1{
		width: 60rpx;
		height: 40rpx;
		font-size: 20rpx;
		text-align: center;
		white-space: nowrap;
		color: rgba(82, 189, 255, 0.3);
		line-height: 40rpx;
	}
	
	.astroContext .astroContextRight .weekAll{
		width: 350rpx;
		height: 397rpx;
		margin-top: 10rpx;
		border-radius: 16rpx;
		background-color: rgba(9, 16, 43, 1.0);
	}
	
	.weekAll .weekHead{
		width: 350rpx;
		height: 70rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.weekAll .weekHeadLeft{
		width: 290rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		line-height: 70rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 500;
		white-space: nowrap;
	}
	
	.weekAll .weekHeadRight{
		width: 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 600;
		text-align: center;
		transform:rotate(-90deg);
	}
	
	.astroContext .astroContextRight .monthTalk{
		width: 350rpx;
		height: calc(71vh - 717rpx);
		margin-top: 10rpx;
		border-radius: 16rpx;
		/* background-color: rgba(9, 16, 43, 1.0); */
	}
	
	.weekAll .weekFoot{
		width: 350rpx;
		height: 300rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	
	.weekAll .weekFoot > view{
		width: 130rpx;
		height: 130rpx;
	}
	
	.monthHead{
		width: 350rpx;
		height: 70rpx;
		box-sizing: border-box;
		padding: 0 14rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.monthHead .monthHeadLeft{
		width: 290rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		line-height: 70rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 500;
		white-space: nowrap;
	}
	
	.monthHead .monthHeadRight{
		width: 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 600;
		text-align: center;
		transform:rotate(-90deg);
	}
	
	.monthFoot{
		width: 350rpx;
		height: calc(68vh - 750rpx);
		/* background-color: aqua; */
	}
	
</style>
